<template>
  <div class="box">
    <div
        class="back">
<!--      <div v-for="item in 20">-->
<!--        <div v-for="item1 in 4" class="back-logo-box">-->
<!--          <img class="back-logo" src="/logo.png"/>-->
<!--        </div>-->
<!--      </div>-->

    </div>

    <div
        id="menuHeader"
        class="header">
<div class="w-full max-w-xs p-5 rounded-lg font-mono">
  <label class="block text-gray-700 text-sm font-bold mb-2" for="unique-input">
    {{ $i18n.enToGlobal('Your Menu') }}
  </label>
  <input
    class="text-sm custom-input w-full px-4 py-2 border border-gray-300 rounded-lg
    shadow-sm transition duration-300 ease-in-out transform focus:-translate-y-1
    focus:outline-black hover:shadow-lg
    hover:border-black bg-gray-100"
    :placeholder="$i18n.enToGlobal('Enter text here')"
    type="text"
    id="unique-input"
  />
</div>
    </div>

    <el-scrollbar
        :style="{
          'height': `calc(100vh - ${menuHeaderHeight}px - ${menuFooterHeight}px - 10px)`,
        }"
    >
      <!-- 设置选中颜色和未选中颜色   -->
      <el-menu
          default-active="''"
          class="menu"
          background-color="rgba(0,0,0,0)"
          active-text-color="rgba(0,0,0,1)"
          text-color="rgba(0,0,0,.6)">
        <template v-for="(item,index) in menuList">

          <el-menu-item
              @click="toPage(item)"
              :index="item.id"
              v-if="!item.children||item.children.length===0">
            <img
                v-if="item.fileIdOfIcon"
                :src="$kt.file.visit(item.fileIdOfIcon)"
                class="menu-icon"/>
            <img
                v-else
                src="/logo.png"
                class="menu-icon"/>
            <span>{{ $i18n.zhToGlobal(item.title) }}</span>
          </el-menu-item>

          <el-sub-menu v-else :index="item.id">
            <template #title>
              <img
                  v-if="item.fileIdOfIcon"
                  :src="$kt.file.visit(item.fileIdOfIcon)"
                  class="menu-icon"/>
              <img
                  v-else
                  src="/logo.png"
                  class="menu-icon"/>
              <span>{{ $i18n.zhToGlobal(item.title) }}</span>
            </template>
            <el-menu-item
                v-for="child in item.children"
                @click="toPage(child)"
                :index="child.id">
              <img
                  v-if="child.fileIdOfIcon"
                  :src="$kt.file.visit(child.fileIdOfIcon)"
                  class="menu-icon"/>
              <img
                  v-else
                  src="/logo.png"
                  class="menu-icon"/>
              <span>{{ $i18n.zhToGlobal(child.title) }}</span></el-menu-item>
          </el-sub-menu>


        </template>

      </el-menu>
    </el-scrollbar>

    <div
        id="menuFooter"
        class="footer">
<div class="card">
        <div class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#ffffff" d="M20 14V17.5C20 20.5577 16 20.5 12 20.5C8 20.5 4 20.5577 4 17.5V14M12 15L12 3M12 15L8 11M12 15L16 11"></path> </g></svg>
        </div>
        <div class="content">
            <span class="title">{{userSelf.nickname}}</span>
            <div class="desc">{{userSelf.email}}</div>

        </div>
</div>
    </div>
  </div>
</template>

<script>

import event from "../../../components/node-kantboot/libs/event/index.js";

export default {
  data() {
    return {
      menuList: [],
      menuHeaderHeight: 0,
      menuFooterHeight: 0,
      userSelf: {},
      routerList: [],
    };
  },
  mounted() {
    this.getHeaderAndFooterHeight();
    this.getMenuList();
    this.userSelf = this.$kt.user.getSelf();
    event.on("getUserSelf", (userSelf)=>{
      this.userSelf = userSelf;
    });
  },
  methods: {
    // 获取header高度和footer高度
    getHeaderAndFooterHeight() {
      this.menuHeaderHeight = document.getElementById('menuHeader').offsetHeight;
      this.menuFooterHeight = document.getElementById('menuFooter').offsetHeight;
    },
    toPage(item) {
      this.routerList = this.$kt.storage.get('routerList');
      if(!this.routerList){
        this.routerList = [];
      }
      let index = this.routerList.findIndex(menu => menu.id === item.id);
      if (index === -1) {
        // 往前面插入
        this.routerList.unshift(item);
      } else {
        // 删除原来的
        this.routerList.splice(index, 1);
        // 往前面插入
        this.routerList.unshift(item);
      }
      this.$kt.storage.set('routerList', this.routerList);
      this.$kt.event.emit('router:toPage');
    },
    getMenuList() {
      // TODO 暂时重新封装中，不使用菜单接口
      // this.$kt.request.send({
      //   uri: '/admin-menu-web/admin/getMenuList',
      //   data: {},
      //   stateSuccess: (res) => {
      //     this.menuList = res.data
      //   },
      //   stateFail: (err) => {
      //     this.$message.error(err.errMsg);
      //   }
      // });
      this.menuList = [
        {
          id: '1',
          // title: '首页',
          title: this.$i18n.enToGlobal('Index page'),
          fileIdOfIcon: '',
          path: '/manage/index/index',
        },
        {
          id: '2',
          // title: '用户管理',
          title: this.$i18n.enToGlobal('User management'),
          fileIdOfIcon: '',
          children: [
            {
              id: '3',
              // title: '用户列表',
              title: this.$i18n.enToGlobal('User account list'),
              fileIdOfIcon: '',
              path: '/manage/user/userAccount/body',
            }
          ]
        },
        {
          id: '3',
          // title: '系统管理',
          title: this.$i18n.enToGlobal('System management'),
          fileIdOfIcon: '',
          children: [
            {
              id: '4',
              // title: '字典管理',
              title: this.$i18n.enToGlobal('Dictionary management'),
              fileIdOfIcon: '',
              path: '/manage/system/dict/body',
            },
            {
              id: '5',
              // title: '权限管理',
              title: this.$i18n.enToGlobal('Permission management'),
              fileIdOfIcon: '',
              path: '/manage/system/permission/body',
            },
            {
              id: '6',
              // title: '角色管理',
              title: this.$i18n.enToGlobal('Role management'),
              fileIdOfIcon: '',
              path: '/manage/system/role/body',
            },
            {
              id: '7',
              // title: '系统设置',
              title: this.$i18n.enToGlobal('System settings'),
              fileIdOfIcon: '',
              path: '/manage/system/setting/body',
            }
          ]
        },
      ];
    },
  }
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  height: 100vh;
  background-color: #F9F9F9;
}

.header {
  position: relative;
  height: 110px;
  z-index: 1;
  box-sizing: border-box;

  .header-logo {
    height: 60px;
  }

  .header-title {
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: bold;
    //color: rgba(255, 255, 255, .8);
    color: rgba(0, 0, 0, .8);
  }
}

.menu {
  border: none;
}


.back {
  position: absolute;
  width: 100%;
  height: 100%;
  // 超出部分隐藏
  overflow: hidden;
  // 不换行
  white-space: nowrap;
}

.back-logo-box {
  position: relative;
  width: 80px;
  height: 80px;
  display: inline-block;
  opacity: .05;

  .back-logo {
    position: absolute;
    width: 70%;
    height: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

}

.back-logo-box:hover {
  opacity: 1;
}

.split-line {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 10px;
  //background-color: rgba(255,255,255,.6);
  background-color: rgba(0, 0, 0, .6);
}

.menu-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 5px;
}

.footer{
  padding: 10px;
  box-sizing: border-box;
}

// ----
/* From Uiverse.io by Yaya12085 */
.card {
  max-width: 320px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  //background: #606c88;
  //background: -webkit-linear-gradient(to right, #3f4c6b, #606c88);
  //background: linear-gradient(to right top, #3f4c6b, #606c88);
  padding: 10px 10px 5px 10px;
  //color: rgb(107, 114, 128);
  color: #333333;
  box-shadow: 0 87px 78px -39px rgba(0,0,0,0.4);
  cursor: pointer;
  position: relative;
  border-radius: 10px;
  background: rgba(0,0,0,.05);
}

.card:hover {
  transform: scale(.97);
}

.icon {
  height: 40px;
  width: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-color: #153586;
  color: rgb(59, 130, 246);

}

.icon svg {
  height: 1.25rem;
  width: 1.25rem;
}

.content {
  margin-left: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
}

.title {
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  //color: rgb(255, 255, 255);
  color: #333333;
}

.desc {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  //color: rgb(202, 200, 200);
  color: #999999;
}

.actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 0.5rem;
  gap: 0.5rem;
}

.download, .notnow {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 0.375rem 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgb(255, 255, 255);
  outline: 2px solid transparent;
  border: 1px solid rgba(253, 253, 253, 0.363);
}

.download {
  background-color: #284385;
  font-weight: 600;
}

.download:hover {
  background-color: #153586;
}

.notnow {
  background-color: #606c88;
  font-weight: 500;
}

.notnow:hover {
  background-color: #3f4c6b;
}

.close {
  margin: -0.375rem -0.375rem -0.375rem auto;
  height: 2rem;
  width: 2rem;
  display: inline-flex;
  border-radius: 0.5rem;
  background-color: #606c88;
  padding: 0.375rem;
  color: rgba(255, 255, 255, 1);
  border: none;
}

.close svg {
  height: 1.25rem;
  width: 1.25rem;
}

.close:hover {
  background-color: rgb(58, 69, 83);
}
</style>
